<div class="span6">
</div>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12" style="font-family:Georgia;">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#topics" data-toggle="tab">Topics</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id = "topics">
                        <div class="container-fluid">
                            <div class="row-fluid">
                                <div class="span12">
                                    <div class="tabbable tabs-left" id="tabs-1486" style="font-family:Georgia;font-size:20px; color:floralwhite">
                                        <?php

                                            $this->load->helper('html');
                                            $list = ($topicTitles);
                                            $list[] =
                                            form_open("information/addTopic").
                                            "
                                            <a id='modal-31209' href='#modal-container-31209' role='button' class='btn' data-toggle='modal'>Add a Topic</a>
                                            <div id='modal-container-31209' class='modal hide fade' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
                                                <div class='modal-header'>
                                                    <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
                                                    <h3 id='myModalLabel'>
                                                        Add Topic
                                                    </h3>
                                                </div>
                                                <div class='modal-body'>
                                                   <div class='control-group'>
                                                        <label class='control-label' for='inputEmail'>Topic Name</label>
                                                        <div class='controls'>
                                                            <input type='text' name = 'input_text_topicName' />
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class='modal-footer'>
                                                    <button class='btn' data-dismiss='modal' aria-hidden='true' >Close</button> <button class='btn btn-primary'>Add</button>
                                                </div>
                                            </div>
                                            "
                                            .form_close();
                                            ;
                                            $attributes = array(
                                                'class' => 'nav nav-tabs'
                                            );
                                            // ul helper from html helper of codeigniter.
                                            echo ul($list, $attributes);
                                        ?>
                                        <div class="tab-content">
                                            <?php
                                                //$this->load->helper('form');
                                                //echo form_open("information/update");
                                                foreach($topicContentsAndId as $tc)
                                                {

                                                    $content = $tc[0];
                                                    $id = $tc[1];
                                                    //display topic content
                                                    echo $content;
                                                    echo "</p>";


                                                    echo "<textarea class = 'information-text_area' style = 'display:none' id = 'textareaContent".$id."' name = textarea>temp</textarea>";
                                                    echo "<legend></legend>";
                                                        // create edit button for each topic content
                                                        echo
                                                        "
                                                        <div class='row-fluid'>
                                                            <div class='span4'>
                                                            </div>
                                                            <div class='span4'>
                                                            </div>
                                                            <div class='span4'>
                                                                <input id = 'edit".$id."' onclick = 'btn_edit_clicked(".$id.");' type =
                                                                'button' class='btn btn-primary' value = 'Edit Content'>

                                                                <input id = 'cancel".$id."' onclick = 'btn_cancel_clicked(".$id.")' type =
                                                                'hidden' class='btn btn-primary' value = 'Cancel'>

                                                                <input id = 'save".$id."' type =
                                                                'hidden' class='btn btn-primary' value = 'Save'>

                                                                <input type = 'hidden' name = 'id_holder' value = '".$id.
                                                                "'>
                                                                ";


                                                            echo "</div></div>";
                                                    echo form_close();
                                                    echo "</div>"; //end of topic content div

                                                }
                                            //echo form_close();
                                            ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>



<script>
 function btn_edit_clicked(id)
 {
     editBtn = document.getElementById('edit' + id);
     cancelBtn = document.getElementById('cancel' + id);
     saveBtn = document.getElementById('save' + id);
     textArea = document.getElementById('textareaContent' + id);
     p = document.getElementById('content' + id);

     jq_editBtn = $('#edit' + id);
     jq_cancelBtn = $('#cancel' + id);
     jq_saveBtn = $('#save' + id);
     jq_textArea = $('#textareaContent' + id);

     jq_p = $('#content' + id);

     var str = jq_p.html();
     var regex = /<br\s*[\/]?>/gi;
     jq_textArea.val(str.replace(regex, "\n"));

         jq_editBtn.fadeOut();
         editBtn.type = "hidden";
         jq_p.fadeOut( "fast",
         function()
         {
             //make sure to hide the two buttons and the text area first
             //jq_saveBtn.hide();
             //jq_cancelBtn.hide();
             //jq_textArea.hide();

            //then change their attributes
             saveBtn.type =  "submit"
             cancelBtn.type = "button"
             textArea.style = "";

             //then show them by fading like a boss
             jq_saveBtn.fadeIn("fast");
             jq_cancelBtn.fadeIn("fast");
             jq_textArea.fadeIn("fast");
         }
     )
 }


     function btn_cancel_clicked(id)
     {
         editBtn = document.getElementById('edit' + id);
         cancelBtn = document.getElementById('cancel' + id);
         saveBtn = document.getElementById('save' + id);
         textArea = document.getElementById('textareaContent' + id);
         p = document.getElementById('content' + id);

         jq_editBtn = $('#edit' + id);
         jq_cancelBtn = $('#cancel' + id);
         jq_saveBtn = $('#save' + id);
         jq_textArea = $('#textareaContent' + id);
         jq_p = $('#content' + id);

         jq_saveBtn.fadeOut();
         jq_textArea.fadeOut('fast',
            function()
            {
                cancelBtn.type = "hidden"


                //then change their attributes
                editBtn.type = "button"
                saveBtn.type = "hidden";

                //then show them by fading like a boss
                jq_editBtn.fadeIn();
                jq_p.fadeIn();
            }
        )

     }
</script